<template>
    <div >
      <div class="oneChart">

        <div id="myChart" :style="{width: '100%', height: '400px'}">

        </div>
      </div>
      <div class="oneChart">

        <div id="myChart1" :style="{width: '100%', height: '600px'}">

        </div>
      </div>
      <div class="oneChart">

        <div id="myChart2" :style="{width: '100%', height: '600px'}">

        </div>
      </div>



    </div>
</template>

<script>
  import http from '../../../api/http'

  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },

    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('myChart'))

        var app = {};
        var option = {};

        app.title = '机构受试者及项目分布';





        option = {
          title: {
            text: '机构受试者及项目分布',
            subtext: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['受试者数', '项目个数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          color:['#5fba76', '#2aa5c0'],
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]

          },
          series: [
            {
              name: '受试者数',
              type: 'bar',
              data: []
            },
            {
              name: '项目个数',
              type: 'bar',
              data: []
            }
          ]
        };

        var vm = this;

        http.postData(vm,'/sys/role/organizationStatement',{},function (resp) {
          //  option.xAxis.data=[];
          // alert(option.xAxis.data);

          for(var temp in resp.body[0]){
            // console.log(resp.body[0][temp].columns.subnum);
            option.series[1].data.push(resp.body[0][temp].columns.subnum)
            option.xAxis.data.push(resp.body[0][temp].columns.name);
            // console.log(resp.body[0][temp].columns.name);
          }
          for(var temps in resp.body[1]){
            // console.log(resp.body[1][temps].columns.peonum);
            option.series[0].data.push(resp.body[1][temps].columns.peonum)
          }
          if (option && typeof option === "object") {
            myChart.setOption(option, true);
          }

        })


      },
      optiontwo(){
        var myChart1 = this.$echarts.init(document.getElementById('myChart1'))
        var option1 = {};
        var app1 = {};
        var timeData = [
          '一周', '二周', '三周', '四周','五周', '六周', '七周', '八周'
        ];



        option1 = {
          title: {
            text: '受试者数量及项目数量增长趋势',
            subtext: '数据来自医科恩',
            x: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false
            }
          },
          legend: {
            data:['受试者数量','项目总数'],
            x: 'left'

          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          color:['#5fba76', '#2aa5c0'],
          axisPointer: {
            link: {xAxisIndex: 'all'}
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 30,
              end: 70,
              xAxisIndex: [0, 1]
            },
            {
              type: 'inside',
              realtime: true,
              start: 30,
              end: 70,
              xAxisIndex: [0, 1]
            }
          ],
          grid: [{
            left: 50,
            right: 50,
            height: '35%'
          }, {
            left: 50,
            right: 50,
            top: '55%',
            height: '35%'
          }],
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
              axisLine: {onZero: true},
              data: timeData
            },
            {
              gridIndex: 1,
              type : 'category',
              boundaryGap : false,
              axisLine: {onZero: true},
              data: timeData,
              position: 'top'
            }
          ],
          yAxis : [
            {
              name : '受试者数量',
              type : 'value',
              inverse: false
            },
            {
              gridIndex: 1,
              name : '项目总数',
              type : 'value',
              inverse: true
            }
          ],
          series : [
            {
              name:'受试者数量',
              type:'line',
              symbolSize: 8,
              hoverAnimation: false,
              data:[]
            },
            {
              name:'项目总数',
              type:'line',
              xAxisIndex: 1,
              yAxisIndex: 1,
              symbolSize: 8,
              hoverAnimation: false,
              data: []
            }
          ]
        };
        var vm = this;
        http.postData(vm,'/sys/role/peoperStatement',{},function (resp) {


          for(var temp in resp.body[0]){
            option1.series[0].data.push(resp.body[0][temp]);
            option1.series[1].data.push(resp.body[1][temp]);
          }

          if (option1 && typeof option1 === "object") {
            myChart1.setOption(option1, true);
          }
        })

      },
      optionthree: function () {
        var myChart2 = this.$echarts.init(document.getElementById('myChart2'))

        var app2 = {};
        var CityArray = {
          11: "北京",
          12: "天津",
          13: "河北",
          14: "山西",
          15: "内蒙古",
          21: "辽宁",
          22: "吉林",
          23: "黑龙江",
          31: "上海",
          32: "江苏",
          33: "浙江",
          34: "安徽",
          35: "福建",
          36: "江西",
          37: "山东",
          41: "河南",
          42: "湖北",
          43: "湖南",
          44: "广东",
          45: "广西",
          46: "海南",
          50: "重庆",
          51: "四川",
          52: "贵州",
          53: "云南",
          54: "西藏",
          61: "陕西",
          62: "甘肃",
          63: "青海",
          64: "宁夏",
          65: "新疆",
          71: "台湾",
          81: "香港",
          82: "澳门",
          91: "国外"
        }

        var vm = this;

        var option2 = {
          title : {
            text: '受试者地区比重图',
            subtext: '医科恩',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          color: ['#b15bff', '#2aa5c0', '#00e3e3', '#ffd306', '#d2a2cc', '#5fba76'],
          legend: {
            orient: 'vertical',
            left: 'left',
            data: []
          },
          series : [
            {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                // {value: 335, name: '北京'},
                // {value: 310, name: '上海'},
                // {value: 234, name: '天津'},
                // {value: 135, name: '河北'},
                // {value: 135, name: '山西'},
                // {value: 1548, name: '其他'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };



        http.postData(vm, '/sys/role/areaStatement', {}, function (resp) {
          console.log(resp);
          var citylength = resp.body.length - 1;
          for (var temp in resp.body) {
            let city = resp.body[temp].columns.a;
            let numm=resp.body[temp].columns.c;
            option2.legend.data.push(CityArray[city]);
            let thisobj={};
            thisobj.value=numm;
            thisobj.name=CityArray[city];
            option2.series[0].data.push(thisobj);

            if (temp == citylength - 1) {
              break;
            }
          }
          option2.legend.data.push("其他");
          let thisobj={};
          thisobj.value=resp.body[citylength].columns.c;
          thisobj.name="其他";
          option2.series[0].data.push(thisobj);
          if (option2 && typeof option2 === "object") {
            myChart2.setOption(option2, true);
          }

        })

      }
    },
    mounted(){

      this.drawLine();
      this.optiontwo();
      this.optionthree();


    }
  }
  </script>
<style scoped>
.oneChart{
  width:900px;
  border:1px solid #79c4a5;
  margin: 0 auto;
  margin-top: 20px;
}
</style>
